<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/myrem.js"></script>

    <script src="./js/china.js"></script>
    <script src="./js/mychart-map.js"></script>

    <script src="./js/index.js"></script>
</head>

<body>
    <div class="layout">
        <div class="cloumn">
            <div class="baseinfo borderimage">
                <div class="item">
                    <h2>2,190</h2>
                    <p>
                        <i class="icon-dot"></i><span>设备总数</span>
                    </p>
                </div>
                <div class="item">
                    <h2>190</h2>
                    <p>
                        <i class="icon-dot"></i><span>设备总数</span>
                    </p>
                </div>
                <div class="item">
                    <h2>3,001</h2>
                    <p>
                        <i class="icon-dot"></i><span>设备总数</span>
                    </p>
                </div>
                <div class="item">
                    <h2>108</h2>
                    <p>
                        <i class="icon-dot"></i><span>设备总数</span>
                    </p>
                </div>
            </div>
            <div class="monitor borderimage">
                <div class="tabs">
                    <a href="javscript:;" class="active" data-index='0'>故障设备监控</a>
                    <a href="javscript:;" data-index='1'>异常设备监控</a>
                </div>
                <div class="content" style="display: block;">
                    <div class="title">
                        <span>故障时间</span>
                        <span>设备地址</span>
                        <span>异常代码</span>
                    </div>
                    <div class="list">
                        <ul>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180909</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180910</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180911</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                                <span class="icon-dot"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div class="title">
                        <span>异常时间</span>
                        <span>设备地址</span>
                        <span>异常代码</span>
                    </div>
                    <div class="list">
                        <ul>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你123</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                            </li>
                            <li>
                                <span>20180908</span>
                                <span>广州欢迎你</span>
                                <span>10001</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="site borderimage">
                <h3>点位站点分布统计</h3>
                <div class="data">
                    <!-- 图表的容器需要有宽高 -->
                    <div class="pie"></div>
                    <div class="info">
                        <div class="item">
                            <h2>2,190</h2>
                            <p>
                                <i class="icon-dot"></i><span>设备总数</span>
                            </p>
                        </div>
                        <div class="item">
                            <h2>2,190</h2>
                            <p>
                                <i class="icon-dot"></i><span>设备总数</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cloumn">
            <div class="map">
                <span>
                    <i class="icon-cube"></i>设备数据统计
                </span>
                <div class="maparea"></div>
            </div>
            <div class="user borderimage">
                <h2>全国用户总量统计</h2>
                <div class="chart">
                    <div class="bar"></div>
                    <div class="data">
                        <div class="item">
                            <h2>2190</h2>
                            <span>
                                <i class="icon-dot"></i>设备总数
                            </span>
                        </div>
                        <div class="item">
                            <h2>190</h2>
                            <span>
                                <i class="icon-dot" style="color:green"></i>设备总数
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cloumn">
            <div class="order borderimage">
                <div class="tabs">
                    <a href="javascript:;" class="active" data-type='day365'>365天</a>
                    <a href="javascript:;" data-type='day90'>90天</a>
                    <a href="javascript:;" data-type='day30'>30天</a>
                    <a href="javascript:;" data-type='day1'>24小时</a>
                </div>
                <div class="data">
                    <div class="item">
                        <h2 class="order_orders">2190</h2>
                        <span>
                            <i class="icon-dot"></i>订单量
                        </span>
                    </div>
                    <div class="item">
                        <h2 class="order_count">190</h2>
                        <span>
                            <i class="icon-dot" style="color:green"></i>销售额(万元)
                        </span>
                    </div>
                </div>
            </div>
            <div class="sales borderimage">
                <div class="caption">
                    <h2>销售额统计</h2>
                    <a href="javascript:;" class="active" data-type='year'>年</a>
                    <a href="javascript:;" data-type='quarter'>季</a>
                    <a href="javascript:;" data-type='month'>月</a>
                    <a href="javascript:;" data-type='week'>周</a>
                </div>
                <div class="line"></div>
            </div>
            <div class="season">
                <div class="channel borderimage">
                    <h3>渠道分布</h3>
                    <div class="data">
                        <div class="item">
                            <h4>39 <small>%</small></h4>
                            <span>
                                <i class="icon-plane"></i>
                                机场
                            </span>
                        </div>
                        <div class="item">
                            <h4>39 <small>%</small></h4>
                            <span>
                                <i class="icon-plane"></i>
                                机场
                            </span>
                        </div>
                        <div class="item">
                            <h4>39 <small>%</small></h4>
                            <span>
                                <i class="icon-plane"></i>
                                机场
                            </span>
                        </div>
                        <div class="item">
                            <h4>39 <small>%</small></h4>
                            <span>
                                <i class="icon-plane"></i>
                                机场
                            </span>
                        </div>
                    </div>

                </div>
                <div class="quarter borderimage">
                    <h3>一季度销售进度</h3>
                    <div class="chart">
                        <div class="box">
                            <div class="gauge"></div>
                            <div class="label">75<small> %</small></div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>1,321</h4>
                                <span>
                                    <i class="icon-dot" style="color: #6acca3"></i>
                                    销售额(万元)
                                </span>
                            </div>
                            <div class="item">
                                <h4>150%</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    同比增长
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list borderimage">
                <div class="all">
                    <h3>全国热榜</h3>
                    <ul>
                        <li>
                            <i class="icon-cup1" style="color: #d93f36;"></i>
                            可爱多
                        </li>
                        <li>
                            <i class="icon-cup2" style="color: #68d8fe;"></i>
                            娃哈啥
                        </li>
                        <li>
                            <i class="icon-cup3" style="color: #4c9bfd;"></i>
                            喜之郎
                        </li>
                    </ul>
                </div>
                <div class="province">
                    <h3>各省热销 <i class="date">// 近30日 //</i></h3>
                    <div class="data">
                        <ul class="sup">
                            <li>
                                <span>北京</span>
                                <span>25,179 <s class="icon-up"></s></span>
                            </li>
                            <li>
                                <span>河北</span>
                                <span>23,252 <s class="icon-down"></s></span>
                            </li>
                            <li>
                                <span>上海</span>
                                <span>20,760 <s class="icon-up"></s></span>
                            </li>
                            <li>
                                <span>江苏</span>
                                <span>23,252 <s class="icon-down"></s></span>
                            </li>
                            <li>
                                <span>山东</span>
                                <span>20,760 <s class="icon-up"></s></span>
                            </li>
                        </ul>
                        <ul class="sub">
                            <li>
                                <span>你好</span>
                                <span>6.00<s class="icon-up"></s></span>
                            </li>
                            <li>
                                <span>你好</span>
                                <span>6.00<s class="icon-up"></s></span>
                            </li>
                            <li>
                                <span>你好</span>
                                <span>6.00<s class="icon-up"></s></span>
                            </li>
                            <li>
                                <span>你好</span>
                                <span>6.00<s class="icon-up"></s></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>